<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        border: 10px red solid;
    }
    .box2
    {
        width: 100px;
        height: 200px;
        background-color: green;
        float: left;
    }
    /*在box2下面添加一个不受浮动影响的box3元素，也就是给box3添加clear属性，这样就能通过box2改变box3在垂直方向的位置来撑开box1的高度*/
    /*但是此解决方法是属于用HTML结构解决CSS表现问题，一般要保证尽量不干涉，所以这个方法也不推荐用*/
    /*利用伪元素after和上面类似的原理，能够达到同样的效果*/
    .box3
    {
        clear: both;
    }
    /**/
    .box1::after
    {
        content:'';
        /*这是个行内元素，所以需要转为块元素*/
        display: block;
        clear: both;
    }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        </div>
    </div>
</body>
</html>